<template>
  <div>
    <div id = 'GaodeMap'>
    </div>
    <div class="info">
      <div class="input-item">
        <div class="input-item-prepend">
          <span class="input-item-text" style="width:8rem;">请输入关键字</span>
        </div>
        <input id='tipinput' type="text">
      </div>
    </div>
    <div class="info">
      <h4 id='status'></h4><hr>
      <p id='result'></p><hr>
      <p >由于众多浏览器已不再支持非安全域的定位请求，为保位成功率和精度，请升级您的站点到HTTPS。</p>
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
// 设置安全密匙
window._AMapSecurityConfig = {
  securityJsCode:'7fb0f387b950ed462d81de35b73ad679'
}
export default {
  mounted(){
      this.initMap()
  },
  data(){
    return{
      map : null,
      mouseTool : null, // 鼠标绘制编辑矢量图形
      overlays : [], // 添加覆盖物
      auto : null,
      placeSearch : null, // 搜索
      circle:null, // 绘制圆对象
      advancedInfoWindow:null, //高级信息窗口
      driving:null, // 路线规划
      autocomplete:null, // 搜索提示
      placeSearch:null,  // 地方搜索
      geolocation:null, // 定位
    }
  },
  methods:{
    async initMap(){
      return new Promise((resolve,reject)=>{
        AMapLoader.load({
        key:'6036d942d3747989c9549df677dbf1d5',
        version:'1.4.15',
        plugins:["AMap.AutoComplete","AMap.PlaceSearch","AMap.Driving","AMap.DragRoute","AMap.MouseTool","AMap.AdvancedInfoWindow","AMap.DistrictSearch","AMap.Geolocation"]
        }).then((AMap)=>{
          const traffic = new AMap.TileLayer.Traffic({
            'autoRefresh': true,     //是否自动刷新，默认为false
            'interval': 180,         //刷新间隔，默认180s
          });
          this.map = new AMap.Map('GaodeMap',{
            viewMode:'2D',
            zoom:13,
            center:[114.268691,30.401227],
            resizeEnable: true,
            // zooms:[12,20],    //可见级别
            visible:true,    //是否可见
            opacity:1,       //透明度
            zIndex:0         //叠加层级
          })
          this.map.add(traffic)
          this.mouseTool = new AMap.MouseTool(this.map)

          var content = [
              '<div class="infowindow-content">',
              '<div class="amap-info-header">方恒国际中心</div>',
              '<div class="amap-info-body">阜通东大街6号</div></div>'
          ];
          this.advancedInfoWindow = new AMap.AdvancedInfoWindow({
              content: content,
              asOrigin: false,
              asDestination: false,
              offset: new AMap.Pixel(0, -30)
          });
          this.advancedInfoWindow.open(this.map)
          traffic.show(); // 控制交通线的显示和隐藏
          // 监听鼠标点击事件
          this.map.on("click", this.clickMapHandler);
          return resolve()
        })
      })
      

    },
    // 定位
    addGeoLocation(){
      this.geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,//是否使用高精度定位，默认:true
        timeout: 10000,          //超过10秒后停止定位，默认：5s
        buttonPosition:'RB',    //定位按钮的停靠位置
        buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

      });
      this.map.addControl(this.geolocation);
      let _that = this
      this.geolocation.getCurrentPosition(function(status,result){
          if(status=='complete'){
              _that.onGeoComplete(result)
          }else{
              _that.onGeoError(result)
          }
      });
    },
    //解析定位结果
    onGeoComplete(data) {
        document.getElementById('status').innerHTML='定位成功'
        var str = [];
        str.push('定位结果：' + data.position);
        str.push('定位类别：' + data.location_type);
        if(data.accuracy){
             str.push('精度：' + data.accuracy + ' 米');
        }//如为IP精确定位结果则没有精度信息
        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
        document.getElementById('result').innerHTML = str.join('<br>');
    },
    //解析定位错误信息
    onGeoError(data) {
        document.getElementById('status').innerHTML='定位失败'
        document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message;
    },
    // 输入提示和地方搜索
    addPOI(){
       var autoOptions = {
        // 城市，默认全国 
        city: "全国",
        // 使用联想输入的input的id
        input: "tipinput"
      }
      this.autocomplete= new AMap.Autocomplete(autoOptions)
      let _that = this
      this.placeSearch = new AMap.PlaceSearch({
        // city:'全国',
        map:_that.map
      })
      this.autocomplete.on('select', function(e){
        //TODO 针对选中的poi实现自己的功能
        _that.placeSearch.search(e.poi.name)
      })
    },
    //路线规划
    addDriving(){
      this.driving = new AMap.Driving({
      // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
      policy: AMap.DrivingPolicy.LEAST_TIME,
      map:this.map
      })
      
      var startLngLat = [114.268691,30.401227]
      var endLngLat = [116.427281, 39.903719]
      
      this.driving.search(startLngLat, endLngLat, function (status, result) {
        // 未出错时，result即是对应的路线规划方案
        console.log(result)
      })
    },

    // 打开高级信息窗口
    addAdvancedInfoWindow(){
      
    },
    // 添加鼠标绘制
    addMouseMarker(){
      this.mouseTool.marker()
    },
    // 信息窗
    addInfoWindow(){
      // 信息窗体的内容
      var content = [
          // "<div><img src='http:webapi.amap.com?images=autonavi.png'> ",
          // "<div style="\"padding:0px" 0px="" 4px;\"=""><b>高德软件有限公司</b>",
          "电话 : 010-84107000   邮编 : 100102",
          "地址 : 北京市望京阜通东大街方恒国际中心A座16层</div></div>"
      ];
      var infoWindow = new AMap.InfoWindow({
        anchor: 'top-left',
        content: content.join("<br>"),  //传入 dom 对象，或者 html 字符串,
      });

      infoWindow.open(this.map,[116.401337,39.907886])
    },
    // 添加覆盖物
    addOverLay(){
      // 覆盖物1 一条直线
      var polyline1 = new AMap.Polyline({
          path: [
              new AMap.LngLat("114.268691","30.401227"),
              new AMap.LngLat("116.382122","39.901176"),
        ]
      });

      // 覆盖物2
      var polyline2 = new AMap.Polyline({
          path: [
              new AMap.LngLat("116.387271","39.912501"),
              new AMap.LngLat("116.398258","39.904600")
          ]
      });

      // 创建覆盖物群组，传入覆盖物组成的数组
      this.overlays = new AMap.OverlayGroup([polyline1, polyline2]);

      // 对此覆盖物群组设置同一属性
      this.overlays.setOptions({
          strokeColor: 'red',
          strokeWeight: 5
      });

      // 统一添加到地图实例上
      this.map.add(this.overlays);
    },
    addCircle(){
      var circle = new AMap.Circle({
        center: new AMap.LngLat(114.268691,30.401227),  // 圆心位置
        radius: 1000, // 圆半径
        fillColor: 'red',   // 圆形填充颜色
        strokeColor: '#fff', // 描边颜色
        strokeWeight: 2, // 描边宽度
      });

      this.map.add(circle);
    },
    addMarker(){

    },
    // 点击地图事件获取经纬度，并添加标记
    clickMapHandler(e) {
      // this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
      // this.setMarker();
      // this.addCircle()
      // this.addOverLay()
      // this.addMouseMarker()
      // this.addInfoWindow()
      // this.addAdvancedInfoWindow()
      // this.addDriving()
      this.addPOI()
      this.addGeoLocation()
    },
    setMarker(){
      // 创建两个点标记
        var marker1 = new AMap.Marker({
            position: new AMap.LngLat(117.39, 39.9),   // 经纬度对象，如 new AMap.LngLat(116.39, 39.9); 也可以是经纬度构成的一维数组[116.39, 39.9]
            title: '北京'
        });
        var marker2 = new AMap.Marker({
            position: new AMap.LngLat(118.39, 39.9),   // 经纬度对象，如 new AMap.LngLat(116.39, 39.9); 也可以是经纬度构成的一维数组[116.39, 39.9]
            title: '北京'
        });
        this.map.add(marker1);
        this.map.add(marker2);
    }
  },
}
</script>

<style lang="scss" scoped>
#GaodeMap {
    overflow: hidden;
    width: 500px;
    height: 500px;
    margin: 0;
    font-family: "微软雅黑";
}
.input-all{
  position: absolute;
}
</style>
<style>
/* 隐藏高德logo  */
.amap-logo {
    display: none !important;
}
/* 隐藏高德版权  */
.amap-copyright {
    display: none !important;
}
</style>
